The greatest annoyance when accessing web pages is the long wait for graphic to download and display. If you consider that it takes about 1000 bytes (1K) of data to fill a screen with plain text but this little icon takes nearly 9K, you will start to understand the predicament.

Indiscriminate use of graphics, no matter how cool, will only antagonise the reader to the point that they will switch off the automatic graphics download in their browser - and all the designer's efforts will be wasted.

Why is it that some graphics download fairly quickly whilst others take ages? It has very little to do with the physical size of the image on-screen, it is purely a function of the number of bytes of data that have to be transferred from the server to the client machine via the telephone system! - The file size!

To appreciate how it is that a large graphic can download and display quicker that a smaller one, you need some understanding of the compression techniques used. The two main graphic file formats used on the web GIF (Graphic Image File Format) and JPEG (Joint Photographic Experts Group) treat picture compression in different ways.

The GIF File Format

This 8-bit GIF file compresses
quite efficiently - 9K
because of the flat areas of colour

But this GIF is only 6K because
it was saved at 4 bits
per pixel instead of the usual 8 bits
yet all the colours are present

This similar 8-bit image is
much less compact because
of the gradations - 18K

Although it is 17K, this
highly compressed JPEG file
looks awful because of
it's 'lossy' compression.

The GIF file format is for 8-bit (256 colour) images or less. Now, it normally takes 24 bits of data to describe the colour of each pixel on the screen. Eight bits each for Red, Green and Blue. This can give each of these colours a brightness level between 0 and 255 and by mixing them, 16,777,216 colours are possible. Although any colour monitor can display all these colours, computers may not be able to accommodate them for economic reasons.

If you only work with text and figures, colour may not be necessary at all and a waste of money. Every addressable pixel on the screen has to have a corresponding 'bit' in memory with a value of 0 or 1 indicating that it is off or lit.

If you use simple charts and diagrams, maybe 16 colours are enough, which only requires four bits of computer video memory per pixel. But more common these days are 8-bit per pixel systems where each individual screen pixel can have values from 0 to 255. By mapping these values to a look-up table of RGB values each requiring 24 bits, it is possible to choose a palette of 256 colours from the total 16,777,216 possible.

Normally an 8-bit screen graphic will be represented by a long sequence of numbers between 0 and 255. To store this image in a file, it is also necessary to say how many pixels wide the image is and how many deep so that it can be reconstructed at any time, line by line. An image that is 128 pixels wide by 96 pixels deep requires 128 x 96 = 12,288 bytes of computer video (VRAM) memory which could also contain about 12 sceenfulls of text! It would also take 12,288 bytes of space on a hard disk to store this image, plus a little extra to store details such its width and depth, name and file format.

If you were to examine this sequence of numbers, you might well discover that there are many occurrences of 'runs' of the same number. An image with areas of flat colour like a plain black or white background will have long runs of 0s or 255s. Rather that storing hundreds of 0s, it is more efficient to say, in effect, 'the next 288 pixels have a value of 0' - which only requires a few bytes of memory. This is called 'run length encoding' and is the fundamental basis of GIF and many other graphic file formats. The GIF format uses other techniques to further improve on this compression but the overall principle is that images with large areas of flat colour will compress more efficiently. Conversely, an image that changes consecutive pixel values often, like a fine chequered pattern, will not compress efficiently, it may even increase the file size if the compression algorithm is not smart enough to realise.

The JPEG File Format

The GIF picture on the left is 24K
and the JPEG on the right 16K
On an 8-bit display they will look
similar but on a 16 or 24-bit
display the JPEG will look better

For this particular image, there is little
difference between the HIGH and LOW quality
JPEG compression in Photoshop.
The file sizes are 30K and 20K respectably

The JPEG file format works with 24-bit images regardless of whether your monitor can display them correctly or not. If you have a display card or built-in video that can handle 24-bit (TrueColor) images, you will be able to view photographic images with all their subtleties of tone and colour. If it is set to 8-bits, the image will be 'dithered' to approximate the effect as best it can from the 256 colours available. Where a GIF image will look identical on an 8-bit or 24-bit monitor, a JPEG image will look great on a 24-bit monitor and not so good on the 8-bit because the dithering technique used is optimised for speed, not quality.

JPEG compresses the picture by intelligently removing information to reduce the file size. This process is called 'lossy' because you are losing picture information to simplify the image. You can choose how much information to throw away with JPEG compression, it is a trade off between picture quality and file size and needs to be judged on a picture by picture basis. Suffice it to say that compression ratios of 10:1 show little loss of picture quality whereas a 100:1 compressed picture will lose most of its fine detail and colours will be simplified into blocks. Compression 'artefacts' will also start to appear, strange dots or blotches that were not visible in the original image.

It is possible to produce smaller files with JPEG than with GIF if you are prepared to accept the picture quality loss. As a general rule, it is best to use GIF for graphic images - icons, logos, buttons and JPEG for photographic ones. JPEG's compression artefacts are more apparent on graphic images. On 8-bit screens, GIF images tend to look better than JPEG but on 16-bit or 24-bit, worse. Remember, more people use 8-bit monitors than any other type.

Palettes and cross platform issues

The colours in this WEB palette
are common across
all platforms ensuring consistent
and predictable results
Download Mac .sit  PC .zip

Conversion table
showing 'preferred RGB' values
for different colour picker
scaling systems

One of the less obvious aspects of 8-bit colour and the use of palettes is that there are fundamental differences in the way they are handled by the MacOS and Windows. The whole point about palettes is that each of the 256 colours can be assigned to any of the 16,777,216 possible values in the RGB colour space. In practice, this is not quite true. The Mac palette has two colours that are fixed and can't be changed - black and white - this is so that interface elements like the menu bar and dialog buttons are always readable no matter what the colour scheme assigned to the current palette. Windows uses more colours in its interface and 'reserves' the whole 16 VGA colours plus another 4 SVGA ones.

Both platforms have a 'System' or default palette giving a good spread of colours for general purpose use but it is possible to create GIF files with optimised 'adaptive' palettes. If the picture were a seascape, for instance, the palette would adapt itself to contain mostly blues and look more like a continuous tone photograph. When the 8-bit computer screen displays that picture, the palette for the whole screen changes - except for the 'reserved' colours. So a background that was originally a non-reserved yellow, because it was mapped to a yellow slot in the palette, finds that the palette slot is now a deep sea blue and changes accordingly. But worse than that, the adjacent picture of a field of red and yellow flowers has also changed to blue because the screen can only use one 'optimal' palette at a time.

Your web browser overcomes this effect by re-mapping the GIF file to its own palette. The adaptive palette that made your picture look so good when displayed by itself, is overridden. On an 8-bit monitor, it may look less good than a picture mapped to your browsers 'System' palette in the first place, try both techiques and see which works best for your particular set of images.

Because of Window's bias towards 'reserved' colours in its palettes, there are less remappable colours than in the Mac's.

Windows icons and other interface elements use the 'reserved' colours so that they stay consistent regardless of what else is on the screen.

The two systems have (nearly) common colours that are used by NetScape and other web browsers. These are based on RGB values of 0, 51, 102, 153, 204, 255 and referred to as the '6x6x6 Palette'. The palette on the left shows the six blocks of six by six colours with 20% steps each of Red, Green and Blue. There are 216 colours which, if used, will give good results on both platforms. Colours outside this range will be dithered.

After many requests, there is now MORE information on palettes!